<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/default/easyui.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/icon.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/demo/demo.css"></link>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.min.js"></script>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.min.js"></script>

<style type="text/css">
	a:link,a:visited{
 		text-decoration:none;  /*超链接无下划线*/
	}
	a:hover{
 		text-decoration:none;  /*鼠标放上去有下划线*/
	}
</style>

	<script type="text/javascript">
	 /*<![CDATA[*/ 
	            
	 $(document).ready(  
			  function(){
				  
				  $('#dlg').dialog('close');
				  
				  $('#deskdlg').dialog({
					    onClose:function(){
					    	var json = $.parseJSON("[]");
					    	 $("#desktbl").datagrid("loadData", json);
					    }
					});
				  $('#deskdlg').dialog('close');
				  $('#dlgdesk').dialog('close');
				  
				 
				  $('#dname').textbox('textbox').keydown(function (e) {
				      if (e.keyCode == 13) {
				    	  $('#count').textbox('textbox').focus(); 

				      }
				  });
				  
				  $('#count').textbox('textbox').keydown(function (e) {
				      if (e.keyCode == 13) {
				    	  submitForm1();

				      }
				  });
				  
				  
				  
				  $("#areaname").textbox({onClickButton:function(e){
					  submitForm();
				  }});
				  
				  $('#areaname').textbox('textbox').keydown(function (e) {
				      if (e.keyCode == 13) {
				    	  submitForm();
				      }
				  });
				  
				  showAreaList();
			  });
	 
	    
	 	function formatColumn(val,row){
				return '<a href="#" onclick="opendeskdlg(\''+row.areaname+'\',\''+val+'\')">查看</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"  onclick="delArea(\''+val+'\')">删除</a>';
			
		}
	 	
	 	function formatColumn1(val,row){
	 		var surl ="show_qrImag?id="+val;
	 		var surl2 ="save_qrImag?id="+val;
			return '<a href="#" onclick="showQr(\''+row.dname+'\',\''+surl+'\')">查看</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"'+surl2+'\" >下载</a>';
			
		} 
	 	
	 	function formatColumn2(val,row){
	 		var surl ="save_qrImag?id="+val;
			return '<a href=\"'+surl+'\" >导&nbsp;出</a>';
			
		} 
	 	
	 	
	 	function move(id)
	 	{
	 		var areaid = $("#areaid").val();
	 		var url = "movedesk?areaid="+areaid+"&deskid="+id;
	    	$.get(url, function(data){
	    		
	    		showDeskList();
	    		
			});
	 	}
	 	
	 	function delArea(val)
	    {
	    	 $.messager.defaults= { ok: "确定",cancel: "取消" };
	    	 
	    	$.messager.confirm("操作提示","您确定要执行操作吗？",
	    		function (data)
	    	 	{
	    	            if (data)
	    	 			{
	    	            	var url = "delete_area?id="+val;
	    			    	$.get(url, function(data){
	    			    		
	    			    		showAreaList();
	    			    		
	    					});
	    
	    	            }
	    	            
	    	     });
	
	    }
	 	
	 	function opendeskdlg(text,id)
		{
	 		$("#areaid").val(id);
	 		
	 		$( "#deskdlg" ).dialog({
				  title: text,
			      modal: true
			    });
	 		showDeskList();
			$('#deskdlg').dialog('open');
			
			
			
		}
	 	
	 	function opendlg()
		{
			$('#dlg').dialog('open');
			$("#areaname").textbox("setValue", "");
			$('#areaname').textbox('textbox').focus(); 
		}
	 	
	 	function opendlg1()
		{
			$('#dlgdesk').dialog('open');
			
			
			$.get("get_desknum", function(data){
				$("#idnum").textbox("setValue", data);
				$('#dname').textbox('textbox').focus(); 
				});
			
			
		}
	 	
	 	function showAreaList()
		{
			$.get("areaList", function(data){
				 $("#table").datagrid("loadData", data);
				 
				});
		}
	 	
	 	function showDeskList()
		{
	 		var id = $("#areaid").val();
	 		var url = "deskListSort?id="+id;
			$.get(url, function(data){
				 $("#desktbl").datagrid("loadData", data);
				});
		}
	 	
	 	function submitForm(){
	 		var name = $("#areaname").val();
	 		if(name.length==0)
	 	    {
	 			alert("请输入区域名");
	 			return;
	 	    }
			$.post("add_area",
					$('#ff').serialize(),
					  function(data){
						showAreaList();
						$('#dlg').dialog('close');
						clearForm();
					  },
					  "text");
		}
		function clearForm(){
			$('#ff').form('clear');
		}
		
		function submitForm1(){
			var name = $("#dname").val();
			var count = $("#count").val();
			
			if(name.length==0)
			{
				alert("请输入餐桌名称");
				return ;
			}
			
			if(count.length==0)
			{
				alert("请输入餐桌容纳人数");
				return ;
			}
			
			if(isNaN(count))
			{
				alert("容纳人数必须为数字");
				return ;
			}
			
			$.post("add_desk",
					$('#ff1').serialize(),
					  function(data){
						showAreaList();
						$('#dlgdesk').dialog('close');
						clearForm1();
						showDeskList();
					  },
					  "text");
		}
		function clearForm1(){
			var id =$("#areaid").val();
			$('#ff1').form('clear');
			$("#areaid").val(id);
		}
		
		
		function download()
		{
			window.location.href="/qr";
		}
		
		function showQr(dname,url)
		{
		
			 	$("#qrdlg").panel({title:dname});
			 	
			 	$.get(url, function(data){
					document.getElementById("qrimg").src="/qrimage/"+data;
					 $('#qrdlg').dialog('open');
				});
				
		}
		

	 	 /*]]>*/  
	</script>
	
	 
</head>
<body>

<div style="position:absolute;left:0px;top:0px;width:510px;height:100%" id="pp1">
	<table id="table" class="easyui-datagrid" title="区域列表" style="width:100%;height:100%;"
			data-options="singleSelect:true,collapsible:false,rownumbers: true,toolbar:'#tb'">
		<thead>
			<tr>
				<th data-options="field:'areaname',editor:'text'" width="50%">区域名</th>
				<th data-options="field:'id',align:'center',formatter:formatColumn" width="50%">操作</th>
			</tr>
		</thead>
	</table>
</div>
	
	<div id="tb" style="padding:2px 5px;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="opendlg()">新增区域</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="download()">导出二维码</a>
	</div>
	
	
	<div id="tb1" style="padding:2px 5px;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="opendlg1()">新增餐桌</a>
	</div>
	
	
	
	<div id="dlg" class="easyui-dialog" title="输入区域名" style="width:200px;height:90px;padding:5px;"
			data-options="
				iconCls: 'icon-save',
				modal:true
			">
		 <form id="ff" style="margin:0px">
		<input class="easyui-textbox"  name="areaname" id="areaname" style="width:100%;height:40px;" data-options="buttonText:'新增'"/>
		</form>
	</div>
	
	
	<div class="easyui-dialog" id="deskdlg" style="width:550px;height:400px;">
	<table id="desktbl" class="easyui-datagrid" style="width:100%;height:100%;"
			data-options="singleSelect:true,collapsible:false,toolbar:'#tb1'">
		<thead>
			<tr>
				<th data-options="field:'idnum'" width="20%">桌号</th>
				<th data-options="field:'dname'" width="20%">桌名</th>
				<th data-options="field:'count'" width="20%">可容纳人数</th>
				<th data-options="field:'id',formatter:formatColumn1,align:'center'" width="40%">二维码</th>
			</tr>
		</thead>
	</table>
</div>
	
	
	<div id="dlgdesk" class="easyui-dialog" title="新增餐桌"  data-options="iconCls:'icon-save',modal:true" style="width:400pxpx;height:400pxpx">
		<center>
       	 <form id="ff1">
       	    <table>
       	    	<tr>
       	    		<td>桌号：</td>
       	    		<td><input class="easyui-textbox" data-options="readonly:true" name="idnum" id="idnum" style="width:120px"/></td>
       	    	</tr>
       	    	<tr>
       	    		<td>桌名：</td>
       	    		<td><input class="easyui-textbox" name="dname" id="dname" style="width:120px"/></td>
       	    	</tr>
       	    	<tr>
       	    		<td>人数：</td>
       	    		<td><input class="easyui-textbox" name="count" id="count" style="width:120px"/></td>
       	    	</tr>
       	    	
       	    </table>
       	    <input type="hidden" id="areaid" name ="areaid" />
        	<a href="#" class="easyui-linkbutton" onclick="submitForm1()">新&nbsp;&nbsp;增</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="easyui-linkbutton" onclick="clearForm1()">重&nbsp;&nbsp;置</a>
         </form>
         </center>
	</div>
	
	<div class="easyui-dialog" data-options="closed:true" id="qrdlg" width="340px" height="340px">
		<center><img id="qrimg" width="300px" height="300px" /></center>
	</div>
	
</body>
</html>